<template>
  <el-menu
    default-active="1"
    class="sidebar-menu"
    :collapse="isCollapse"
    :unique-opened="true"
  >
    <!-- 一级菜单项 -->
    <el-sub-menu
      v-for="(menu, index) of menus"
      :key="index"
      :index="String(menu.index)"
    >
      <template #title>
          <el-icon><Home /></el-icon>
        <!-- <i :class="menu.icon"></i> -->
        <span>{{ menu.title }}</span>
      </template>
      <!-- 二级菜单项 -->
      <el-menu-item
        v-for="(subMenu, subIndex) in menu.children"
        :key="subIndex"
        :index="String(subMenu.index)"
      >
        <el-icon><User /></el-icon>
        <!--<i :class="subMenu.icon"></i>-->
        {{ subMenu.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
    
</template>

<script setup>
import { ref } from 'vue'

// 模拟菜单数据
const menus = ref([
  {
    index: '1',
    title: '首页',
    icon: 'user',
  },
  {
      index: '2',
      title: '会员管理',
      icon: '',
      children: [
          {
              index: '2-1',
              title: '会员',
              icon: '',
          }
      ]
  }
]);

// 控制菜单折叠状态
const isCollapse = ref(false)


</script>

<style scoped>
.sidebar-menu {
  width: 200px;
}

/* 可以根据需要添加更多的样式 */
</style>